<template>
	<view class="my">
		<view class="bg-img">
			<image src="/static/images/bg.png" mode="aspectFill"></image>
		</view>
		<view class="fill" :style="{height:fillHeight + 'px' }"></view>
		<view class="info">
			<view class="l" v-if="!token">
				<image src="/static/images/132.jpg" mode="aspectFit"></image>
				<view class="login" @click="login">登录</view>
			</view>
			<view class="l" v-else>
				<image :src="userInfo.logo ? userInfo.logo:'/static/images/132.jpg'" mode="aspectFill"></image>
				<view class="login">{{userInfo.nickName? userInfo.nickName : '用户1'}}</view>
			</view>
			<view class="r" @click="setAccount">
				账号设置
			</view>
		</view>
		<button @click="logout">退出登录</button>
	</view>
</template>

<script>
	import {
		getHeight
	} from '@/utils/statusBarHeight.js'
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		loginByWechatApi
	} from '@/api/login.js'
	export default {
		data() {
			return {
				fillHeight: 0
			}
		},
		mounted() {
			this.fillHeight = getHeight()
		},
		methods: {
			...mapActions(['userLogin']),
			...mapMutations(['loginOut']),
			login() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: async (cres) => {
						let res = await loginByWechatApi({
							js_code: cres.code
						})
						if (res.code == 0) {
							this.userLogin(res.data)
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							})
						}
					}
				})

				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateTo({
					url: '/subPackages/login/login'
				})
				// #endif
			},
			//账号设置
			setAccount() {
				if (this.token) {
					uni.navigateTo({
						url: '/subPackages/userConfig/index'
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}

			},
			//退出登录
			logout() {
				this.loginOut()
			}
		},
		computed: {
			...mapState({
				token: state => state.user.token,
				userInfo: state => state.user.userInfo
			})
		}

	}
	// //退出登录
	// const logout = () => {
	// 	userStore.clearProfile()
	// }
</script>

<style lang="scss" scoped>
	.my {
		width: 100%;
		height: 100vh;

		.bg-img {
			position: fixed;
			z-index: -2;
			width: 100%;

			image {
				width: 100%;
			}
		}

		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;

			.l {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.login {
					margin-left: 20rpx;
				}
			}

			.r {}
		}
	}
</style>